<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:hover使用</title>
		<style>
			.word{
				display: flex;
			}
			.word div{
				width: 50px;
				height: 50px;
				background-color: lightgreen;
				border-radius: 50%;
				color: darkgreen;
				border: 1px dashed;
				font-size: 35px;
				font-family: sans-serif;
				text-align: center;
				line-height: 50px;
				transition: 0.5s 0.4s ease-out;
			}
			.word div:hover{
				background-color: gold;
				transform: scale(1.5);
				transition: 0.1s ease-out;
			}
		</style>
	</head>
	<body>
		<figure class="word">
			<div>X</div>
			<div>I</div>
			<div>A</div>
			<div>O</div>
		</figure>
	</body>
</html>
